<template>
	<div>
		<div class="content-top">
			<span class="h1">数据填报</span>
			<span class="h2">数据填报</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="left-content " style="margin-bottom: 20px;">
				<div class="clearfix">
					<p class="fl titles">数据填报</p>
					<el-button type="primary" size="small" @click="addZslb()" style='margin-top: 5px; margin-left: 10px;'>添加报表</el-button>
					<div class="fr">
						<el-input v-model="input" placeholder="请输入内容" style="width:217px;"></el-input>
						<el-button type="primary">查询</el-button>
					</div>
				</div>
			</div>
			<el-table :data="Datas" style="width: 100%" empty-text=''>
				<!--<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-tabs v-model="activeName" @tab-click="handleClick">
								<el-tab-pane label="房屋" name="first">
									<el-form-item label="单据号">
							            <span>{{ props.row.Nub }}</span>
							        </el-form-item>
								</el-tab-pane>
								<el-tab-pane label="土地" name="second">
									<el-form-item label="电话">
							            <span>{{ props.row.Tel }}</span>
							        </el-form-item>
								</el-tab-pane>
								<el-tab-pane label="林木" name="third">
									<el-form-item label="日期">
							            <span>{{ props.row.Date }}</span>
							        </el-form-item>
								</el-tab-pane>
							</el-tabs>
						 </el-form>
					</template>
				</el-table-column>-->
				<el-table-column prop="Nub" label="单据号" width="180">
				</el-table-column>
				<el-table-column prop="Date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="ONes" label="户主" width="180">
				</el-table-column>
				<el-table-column prop="Tel" label="电话" width="180">
				</el-table-column>
				<el-table-column prop="Adr" label="行政区域" width="180">
				</el-table-column>
				<el-table-column prop="Str" label="状态" width="180">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-dropdown trigger="click">
							<span class="el-dropdown-link"><el-button type="primary">操&nbsp;&nbsp;&nbsp;&nbsp;作<i class="el-icon-arrow-down el-icon--right"></i></el-button></span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<router-link v-bind="{to:'/tables/'+(1)}"><el-button size="small"  type="success">查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;看</el-button></router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button size="small" type="primary">审核通过</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button size="small" type="danger">审核退回</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button size="small" type="warning" @click='print()'>合同打印</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button size="small" type="info">款项支付</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next" :total="1">
				</el-pagination>
			</div>
		</div>

		<el-dialog title="添加数据" :visible.sync="mark" width="70%">
			<!--<el-button type="primary" size="small" class='fr asds'>添加</el-button>-->
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="工程项目:">
						<el-select v-model="value1" placeholder="请选择">
							<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="户主:">
						<el-select v-model="value" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="单据号:">
						<el-input class='djh' v-model="formLabelAlign.size"></el-input>
					</el-form-item>
					<el-form-item label="日期:">
						<el-date-picker v-model="times" class='dats' type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<hr style="margin-bottom: 10px;" />
					<el-button type="primary" size="small" class='fr asds' @click='adds()'>添加</el-button>
					<div>
						<el-form-item label="土地:">
							<el-select v-model="value2" placeholder="请选择">
								<el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

					</div>

					<el-form-item label="征收项目:">
						<el-select v-model="value3" placeholder="请选择">
							<el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>

				<el-table :data="Datas1" border style="width: 100%">
					<el-table-column prop="objs" label="工程项目">
					</el-table-column>
					<el-table-column prop="houers" label="户主">
					</el-table-column>
					<el-table-column prop="num" label="单据号">
					</el-table-column>
					<el-table-column prop="Date" label="日期">
					</el-table-column>
					<el-table-column prop="ladns" label="土地">
					</el-table-column>
					<el-table-column prop="pros" label="征收项目">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="small" type="danger" @click='del(scope.$index)'>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="mark = false">取 消</el-button>
			    <el-button type="primary" @click="mark = false">确 定</el-button>
		    </span>
		</el-dialog>
		<div id="subOutputRank-print">
			<h1>打印标题</h1>
			<p>打印内容~~</p>
		</div>
	</div>
</template>
<script></script>
<script>
	export default {
		name: 'datafil',
		data() {
			return {
				activeName: 'first',
				times: '',
				formLabelAlign: {
					size: '',
				},
				options1: [], //工程项目列表
				value1: '', //选择的工程项
				option2: [], //土地列表
				value2: '', //选择的土地
				option3: [], //征收项目列表
				value3: '', //选择的征收项目
				options: [], //户主
				value: '', //选择的户主
				labelPosition: 'left',
				data: '', //日期
				mark: false,
				input: "",
				Datas: [{
					Nub: 12,
					Date: '2018-3-9',
					ONes: '中建',
					Tel: 1345,
					Adr: '重庆',
					Str: '正常'
				}], //报表
				Datas1: [{
					objs: "",
					houers: '',
					num: '',
					Date: '',
					ladns: "",
					pros: '',
				}]
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			addZslb() {
				this.Datas1 = []
				this.mark = true
			},
			adds() {
				this.Datas1.push({
					objs: "11",
					houers: 1,
					num: 2,
					Date: '2017-9-8',
					ladns: "50",
					pros: '中',
				})
			},
			del(index) {
				this.Datas1.splice(index, 1)
			},
			print(e) {
				let subOutputRankPrint = document.getElementById('subOutputRank-print');
				console.log(subOutputRankPrint.innerHTML);
				let newContent = subOutputRankPrint.innerHTML;
				let oldContent = document.body.innerHTML;
				document.body.innerHTML = newContent;
				window.print();
				window.location.reload();
				document.body.innerHTML = oldContent;
				return false;
			}
		}
	}
</script>

<style>
	.asds {
		position: relative;
		z-index: 9999;
	}
	
	#subOutputRank-print {
		display: none;
	}
	.dats .el-input__inner{
		padding-left: 30px !important;
	}
	.djh{
		width: auto !important;
	}
</style>